﻿<include file="header"/>
<link rel="stylesheet" href="__PUBLIC__/shop/css/detail.css">
 <script src="__PUBLIC__/index/js/jquery-1.8.3.min.js"></script>
 <style>
.li1{
float: left;
padding:5px 10px;
margin-right: 12px;
border: 1px solid #eee;
}
.li2{
float: left;
padding:5px 10px;
margin-right: 12px;
border: 1px solid transparent;
}
.active{
    /*border: 1px solid red;*/
}
.active2{
    border: 1px solid red;
}
.layout-header .layout-header-service {
    float: right;
    height: 152px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 </style>
<!--content-->
<main class="wrapper page-detail" style="    position: relative;
    width: 100%;
    z-index: 998;
    height: auto;
    background-color: #fff;">
            <div class="container">
                <section class="crumbs clearfix">
                            <a data-mtype="store_de_mbx_1" href="{:U('Index/Shop/index')}">首页</a>&nbsp;&gt;&nbsp;
                            <a class="ellipsis crumbs-title" href="{:U('Index/Shop/shopList')}">商城产品页</a>
                </section>
                <section class="row">
					
                    <div class="preview" id="preview">
                        <div class="preview-booth">
                            <a href="javascript:;" id="J_imgBooth">
                                <img src="{$proInfo.img_url}" height="375" width="375" alt="">
                            </a>
                        </div>
                        <if condition="$picList!=null">
                            <ul class="preview-thumb clearfix" id="J_previewThumb">
                                <volist name="picList" id="vo">
                                    <li><a ><img src="{$vo.img_url}" width="75" height="75"></a></li>
                                </volist>
                            </ul>
                        </if>
                    </div>
                    <div class="property" id="property">
                            <div class="property-hd">
                                <!--<h1>参数后台添加</h1>-->
                                <p class="mod-info active">{$proInfo.title}</p>
                            </div>
                            <div class="property-sell">
                                <dl class="property-sell-price clearfix">
                                    <dt class="vm-metatit" id="J_discountTag">原价:<span class="s-space"></span><span class="s-space"></span></dt>
                                    <dd>
                                        <div class="mod-price">
                                            <small style="color:#9e9e9e">¥</small>
                                            <span id="J_price1" class="vm-money jiage" style="color:#9e9e9e">{$proInfo.jiage}</span>
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="property-sell-price clearfix">
                                    <dt class="vm-metatit" id="J_discountTag">折  扣  价：</dt>
                                    <dd>
                                        <div class="mod-price">
                                            <small style="color: red">¥</small>
                                            <span id="J_price2" class="vm-money scjiage" style="color:red">{$proInfo.scjiage}</span>
                                        </div>
                                    </dd>
                                </dl>
                                <!--<dl class="property-sell-coupon clearfix" id="J_prodPromo" style="">-->
                                    <!--<dt class="vm-metatit" style="width: 76px;">优<span class="s-space">惠</span><span class="s-space">券：</span>-->
                                    <!--</dt>-->
                                    <!--<if condition="$coupon['sum']!=null">-->
                                        <!--<dd>-->
                                            <!--<p id="J_promoInner">-->
                                                <!--<span class="vm-tag multiple"><em>满{$coupon.sum}减{$coupon.jian}</em></span></p>-->
                                        <!--</dd>-->
                                        <!--<else/>-->
                                        <!--<dd>-->
                                            <!--<p id="J_promoInner2">-->
                                                <!--<span class="vm-tag multiple"><em>该商品未设置满减优惠券</em></span></p>-->
                                        <!--</dd>-->
                                    <!--</if>-->
                                <!--</dl>-->

                            </div>
                                
                            <div class="property-buy">

                                <p class="vm-message" id="J_message"></p>
                                <dl class="property-buy-quantity">
                                    <dt class="vm-metatit" style="width: 83px;">数量：<span class="s-space"></span><span class="s-space"></span>
                                    </dt>
                                    <dd class="clearfix">
                                        <div class="mod-control">
                                            <a title="减少" href="javascript:;" class="vm-minus ">-</a>
                                            <input type="hidden" id="pid" value="{$proInfo.id}">
                                            <input type="text" value="1" id="J_quantity" data-max="100">
                                            <a title="增加" href="javascript:;" class="vm-plus">+</a>
                                        </div>
                                    </dd>
                                </dl>

                                <ul id="ul1">

                            <li class="li2" style="font-weight: bold">规格:</li>
                            <volist name="stock" id="vo">
                            <li class="li1" id = "{$vo.id}">{$vo.type}</li>
                            </volist>
                                </ul>
                             
                                <script>
        $(".li1").click(function(e){
            e.preventDefault();
             $(this).addClass('active2');
             $(this).siblings().removeClass("active2");
             var _this = $(this);
             var id = _this.attr('id');
            var url = "__URL__/stock/id/"+id;
            // alert(_this.attr('id'));
            $.get(url,{},function(e){
                console.log(e);
                $('.jiage').html(e.price);
                $('.scjiage').html(e.discount);
                $('#headclass').html('￥'+e.discount);
            },'json');
        });

 </script>
                                <br>
                                <div class="property-buy-action">

                                    <a data-mtype="store_de_buy" href="javascript:void(0);" id="J_btnBuy" class="btn btn-danger btn-lg mr20">立即购买</a>
                                    <a data-mtype="store_de_cart" href="javascript:;" id="J_btnAddCart" class="btn btn-primary btn-lg hide" style="display: inline-block;"><i></i>加入购物车</a>

                                    <span class="vm-service" id="J_panicBuyingWrap"></span>
                                </div>
                            </div>
                             
                            </div>
                          
                        <!--<div class="prod-addition">-->
                            <!--<input type="hidden" id="servertime" value="1510381311701">-->

                            <!--<div class="layer-promo" id="layerPromo" style="display:none;">-->
                                <!--<div class="layer-promo-hd">-->
                                    <!--领取优惠券-->
                                    <!--<a class="vm-close" id="J_promoClose" href="#">-->
                                        <!--╳-->
                                    <!--</a>-->
                                <!--</div>-->
                                <!--<div class="layer-promo-bd">-->
                                    <!--<dl class="discount-coupon" id="J_discountCoupon">-->

    <!--<dd class="discount-coupon-item clearfix multiple">-->
        <!--<div class="mod-btn">-->
            <!--<a class="vm-btn" data-key="8580001009">立即领取</a>-->
        <!--</div>-->
        <!--<div class="mod-bd clearfix">-->
            <!--<p class="mod-bd-value">-->
                <!--<span class="vm-amount"><sup>¥</sup>20.00</span>-->
                <!--<em>-->

                <!--(多品券)-->

                <!--</em>-->
            <!--</p>-->
            <!--<p class="mod-bd-name">-->
                <!--<span class="vm-name">双十一大促优惠券</span>-->
                <!--<span class="vm-claim">满699可用</span>-->
            <!--</p>-->
            <!--<p class="mod-bd-info">-->
                <!--<span>2017.11.01 00:00 - 2017.11.12 00:00</span>-->
                <!--<span class="vm-range ellipsis">适用范围：温控器-温控器E、温控器-温控器MAX、温控器-温控器5、温控器-温控器5礼盒版、温控器-温控器 X</span>-->

                <!--<a class="vm-more" target="_blank" href="">查看适用&gt;</a>-->

            <!--</p>-->
        <!--</div>-->
    <!--</dd>-->
<!--</dl>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                </section>
            </div>
            <div class="detail-tab anim detail-fast-float" id="detailFast">
                <div class="fixed-container">
                    <ul class="clearfix">
                        <li class="current">
                            <a href="#">商品详情</a>
                        </li>
                        <li class="">
                            <a href="#">规格参数</a>
                        </li>
                            <li class="">
                                <a href="#">常见问题</a>
                            </li>
                    </ul>
                    <!--<div class="shortcut trans">-->
                        <!--<div class="shortcut-con trans">-->
                            <!--<div class="mod-buy">-->
                                <!--<a data-mtype="store_de_buynow" href="javascript:void(0);" id="J_btnBuyShortcut" class="btn btn-primary btn-lg"><i></i>现在购买</a>-->
                            <!--</div>-->
                            <!--<div class="mod-total trans">-->
                            <!--温控器 Note6<em class="vm-price" id="J_totalPriceShortcut">￥1499.00</em>-->
                                <!--<p class="vm-title" id="J_summaryName">全网通公开版 孔雀青 4GB+32GB 官方标配</p>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="mod-title">

                    </div>
                </div>
            </div>
           
        </main>
	 <section class="row detail" id="detail">
                <div style="height:62px;">
                    <div class="detail-tab" id="detailTabFixed">
                        <div class="fixed-container">
                            <ul class="clearfix" >
                                <li >
                                    <a data-mtype="store_de_xq_1">商品详情</a>
                                </li>
                                <li class="">
                                    <a data-mtype="store_de_xq_2" >规格参数</a>
                                </li>
                                    <li class="">
                                        <a data-mtype="store_de_xq_3">常见问题</a>
                                    </li>
                            </ul>

                        </div>
                    </div>
         </div>
                <div class="detail-content container" id="container">
                    <div class="introduce current" id="introduce" >
                        {$proInfo.content}
                    </div>
                    <div class="standard" id="standard" style="display: none;">
                        <table class="standard-table">
                            <tbody>
                                <volist name="proNotice" id="vo">
                                    <tr class="standard-table-group">
                                        <th colspan="2">{$vo.class_name}</th>
                                    </tr>
                                    <tr>
                                        <th>{$vo.pname}</th>
                                        <td>{$vo.ptext}</td>
                                    </tr>
                                </volist>
                            </tbody>
                        </table>
                    </div>
                    <div class="question" id="question" style="display: none;">
                            <div class="question-list">
                                <h2>热门回答</h2>
                                    <volist name="wtList" id="vo">
                                        <dl class="mod-item">
                                            <dt class="vm-question">
                                                {$vo.title}
                                            </dt>
                                            <dd class="vm-answer">
                                               {$vo.content}
                                            </dd>
                                        </dl>
                                    </volist>
                            </div>
                        </div>
                </div>
            </section>
<!--video	-->
<div id="video" class="home-video-box xm-plain-box J_itemBox J_videoBox is-visible">
	<div class="box-hd">
		<h2 class="title">猜你喜欢</h2>
		<!-- <h2 class="title">今晚滑雪多快乐，我们坐在雪橇上  ︿(￣︶￣)︿</h2>
		 -->

	</div>
	<div class="box-bd J_brickBd">
		<ul class="video-list clearfix">
            <volist name="tjList" id="vo">
                  <li class="video-item video-item-first">
                    <div class="figure figure-img">
                        <a class="J_videoTrigger exposure" href="{:U('Index/Shop/article',array('id'=>$vo['id']))}" ><img src="{$vo['img_url']}" style="display: inline-block;width: 220px;height: 300px"></a>
                    </div>
                    <h3 class="title"><a class="J_videoTrigger" href="{:U('Index/Shop/article',array('id'=>$vo['id']))}" title="" target="">{$vo.title|cutStr=10,0,1}</a></h3>
                    <p class="desc">简介：{$vo.miao|cutStr=100,0,1}<a href="" target="">查看详情</a></p>
                    </li>
            </volist>
		</ul>
	</div>
</div>

	
<!--conntent-->
<include file="footer"/>
 

<script>
    $(function () {
        //加入购物车
        $("#J_btnBuy,#J_btnAddCart,.btn").click(function () {
            var num=$("#J_quantity").val();
            var pid=$("#pid").val();
            var sid=$(".active2").attr('id');
            if(typeof(sid) == 'undefined'){
                //alert('请选择规格');return false;
            }
            var price=$("#J_price1").html();
            var scjiage=$("#J_price2").html();
            var url="__URL__/member_car";
            $.post(url, {
                pid:pid,
                num:num,
                price:price,
                scjiage:scjiage,
                sid:sid,

            }, function(response) {
                if(response.status==1){
                    location.href = "__URL__/shop_cart";
                }else{
                    alert(response.msg);
                    location.href='__URL__/login';
                }
            }, 'json');
        })
    })
</script>

<script>
    $(function(){
$('#site-selector').mouseover(function(){$(this).addClass('hover')}).mouseout(function(){
$(this).removeClass('hover')
})
$('#J_previewThumb li:first').addClass('current')
$('#J_previewThumb li img').mouseover(function(){
$(this).parent().parent().addClass('current').siblings().removeClass('current');
$('#J_imgBooth img').attr('src',$(this).attr('src'));
})
$('.vm-sale-img').click(function(){
$(this).addClass('selected').siblings().removeClass('selected')
})
/*********/
	$('#layout-magnet-text').click(function(){$("html,body").animate({scrollTop:0}, 500);})	
						$('#container div:first').show();$('#detailTabFixed li:first').addClass('current');	
					$('#detailTabFixed li').click(function(){
					$(this).addClass('current').siblings().removeClass('current');	
					
					$('#container div').eq($(this).index()).show().siblings().hide();	
					})

$('#JD-stock .tab>li').click(function(){
$(this).addClass('curr').siblings().removeClass('curr');
$("#JD-stock .site-area-item").eq($(this).index()).show().siblings().hide();	
})	
$('.mod-control a').eq(1).click(function(){
	//disabled
	if($('#J_quantity').val()>=100){
		$(this).addClass('disabled');
		
		return false;
	}else{
		$('.mod-control a').eq(0).removeClass('disabled');
		$(this).removeClass('disabled');
	}
	$('#J_quantity').val(parseInt($('#J_quantity').val())+1)
 })		
$('.mod-control a').eq(0).click(function(){
	if($('#J_quantity').val()<=1){
		$(this).addClass('disabled');
		return false;
	}else{
		$(this).removeClass('disabled');
		$('.mod-control a').eq(1).removeClass('disabled');
	}
	$('#J_quantity').val(parseInt($('#J_quantity').val())-1)
 })				
})

</script>

